<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position学习1例子</title>
    <style>
        .pg-header{
            margin:0 auto;    /*贴最上边的边  auto表示居中*/
            width: 980px;
            height:50px;
            background-color:#FF3654;
            color:yellow;
            position:fixed;   /*表示固定位置*/
            top:0;            /*者3个参数表示固定位置的位置*/
            right:0;
            left:0;
            z-index:10      /*表示层叠在最高级别，在最上面*/
        }
        .pg-body{
            margin:0 auto;
            width:980px;
            height:5000px;
            background-color: cornflowerblue;
            margin-top:50px    /*表示跟上面的边框距离50px*/
        }
        .backtop{
            width:38px;
            height:45px;
            /*line-height:50px;*/
            background-color:black;
            color:palevioletred;
            position:fixed;
            bottom: 50px;
            right:50px;
        }
        .opacity-css{
            width:500px;
            height:500px;
            position:fixed;
            top:50%;
            left:50%;
            margin-left:-250px;
            margin-top:-200px;
            background-color:white;
            opacity:80;
            color:red;
        }
    </style>
</head>
<body>
    <script>
        function GoTop(){
            document.body.scrollTop=0;   /*script脚本，返回最顶*/
        }
    </script>
    <div onclick="GoTop()" class="backtop">返回顶部</div>
    <div class="pg-header margin-css" >头部</div>
    <div class="pg-body">
        <div>内容</div>
        <!--position的relative+absolute配置使用例子-->
        <div style="position:relative;width:200px;height:200px;border:1px solid red;margin:0 auto">
            <div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:black;"></div>
        </div>
    </div>
    <!--z-index;number表示层叠级别-->
    <div class="opacity-css" style="z-index:8;">这里的内容跟着屏幕走的</div>
</body>
</html>